import React,{useState,useEffect} from 'react'
import axios from 'axios'
import { useParams,useNavigate } from 'react-router-dom'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { NavBar, Image, Cell, ActionBar } from 'react-vant'
export default function Detail() {
  const [data,setData]=useState([])
  const [car,setCar]=useState([])
  let [num,setNum]=useState(0)
  const navigate=useNavigate()
  const {id}=useParams()
  useEffect(()=>{
    axios.get('/api/detail',{params:{id}}).then((resp)=>{
        let {data:{item}}=resp
        setData(item)
    })
  },[])

  const jrgwc=()=>{
    num++
    setNum(num)
    car.push(data)
    localStorage.setItem('car',JSON.stringify(car))
  }
  const gwc=()=>{
    navigate('/zhut/gwc')
  }
  return (
    <div>
      <NavBar
        title="商品详情"
        leftText="返回"
        onClickLeft={() => navigate('/zhut/home')}
      />
      <div>
        <Image width="100%" height="260" src={data.img} />
        <Cell
          title={data.title}
          value={'¥' + data.price}
          label={data.word}
        />
      </div>
      <div>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
          <ActionBar.Icon
            icon={<CartO />}
            badge={{ content: num }}
            text="购物车"
            onClick={()=>gwc()}
          />
          <ActionBar.Icon icon={<ShopO />} text="店铺" />
          <ActionBar.Button
            type="warning"
            text="加入购物车"
            onClick={()=>jrgwc()}
          />
          <ActionBar.Button type="danger" text="立即购买" />
        </ActionBar>
      </div>
    </div>
  )
}
